/*
 * @description: console system common stylesheet 
 * @version: 0.1
 */
 @import "compass/css3";
 @import "common/css/common.scss";
 @import "/index/images/icon/*.png";
 @import "/index/images/lib/*.png";

$icons: sprite-map("/index/images/icon/*.png",$spacing:12px);
$lib-icons: sprite-map("/index/images/lib/*.png",$spacing:5px);
.container{
	width: 100%;
}
/* dome system icon */
// document
.icon-doc{
	@include get-sprite($icons,doc,true);
}
.icon-add{
	@include get-sprite($icons,add,true);
}
.icon-add-white{
	@include get-sprite($icons,add-white,true);
}
.icon-add-green{
	@include get-sprite($icons,add-green,true);
}
.icon-github,.icon-gitlab,.icon-centos,.icon-ubuntu{
	margin-right: 6px;
}
.icon-github{
	@include get-sprite($icons,github,true);
}
.icon-gitlab{
	@include get-sprite($icons,gitlab,true);
}
.icon-centos{
	@include get-sprite($lib-icons,centos,true);
}
.icon-ubuntu{
	@include get-sprite($lib-icons,ubuntu,true);
}
.icon-search{
	@include get-sprite($icons,search,true);
	margin-right: 6px;
}
.icon-edit{
	@include get-sprite($icons,edit,true);
}
.icon-down{
	@include get-sprite($icons,down,true);
}
.icon-down-white{
	@include get-sprite($icons,down-white,true);
}
.icon-down,.icon-down-white{
	&.up{
		@include rotate(-90deg);
	}
	&.top{
		margin-left: 8px;
		@include rotate(180deg);
	}
}
.icon-delete{
	@include get-sprite($icons,delete,true);
}
.icon-cancel{
	@include get-sprite($icons,cancel,true);
	margin-left: 4px;
}
.icon-check{
	@include get-sprite($icons,check,true);
}
.icon-last,.icon-next,.icon-down-double{
	@include get-sprite($icons,last,true);
	width: 14px;
	height: 16px;
	@include sprite-background-position($icons, last ,2px,3px);
}
.icon-next{
	@include sprite-background-position($icons, next ,2px,3px);
}
.icon-down-double{
	@include rotate(-90deg);
	&.up{
		@include rotate(90deg);
	}
}
.icon-label{
	@include get-sprite($icons,label,true);
	margin-right: 4px;
}
.icon-help{
	@include get-sprite($icons,help,true);
	&:hover{
		@include sprite-background-position($icons, help-hover);
	}
}
.icon-user{
	@include get-sprite($icons,user,true);
	margin-right: 4px;
}
.icon-cpu{
	@include get-sprite($icons,cpu,true);
	margin-right: 4px;
}
.icon-memory{
	@include get-sprite($icons,memory,true);
	margin-left: 4px;
}
.icon-order{
	@include get-sprite($icons,order,true);
	margin-left: 4px;
}
.icon-fresh{
	@include get-sprite($icons,fresh,true);
	margin-right: 4px;
	&:hover{
		@include sprite-background-position($icons, fresh-hover)
	}
}
.icon-copy{
	@include get-sprite($icons,copy,true);
	margin-right: 4px;
	&:hover{
		@include sprite-background-position($icons, copy-hover)
	}
}
.icon-tool{
	@include get-sprite($icons,tool,true);
}
.icon-config{
	@include get-sprite($icons,config,true);
	margin-right: 4px;
}

/* dome system icon end*/

/* common style */

// search input
.ui-input-search{
	width: 274px;
	padding-left: 38px;
	@include get-sprite($icons,search,false);
	@include sprite-background-position($icons, search ,10px,7px);
	background-origin:padding-box;
}
.ui-input-full{
	width: 100%;
}
/* text style */
.txt-safe{
	color: dome-color(dome,safe);
}
.txt-warning{
	color: dome-color(dome,warning);
}
.txt-success{
	color: dome-color(dome,active);
}
.txt-normal{
	color: dome-color(dome,primary);
}
.txt-prompt{
	color: dome-color(font,prompt);
}
.txt-primary{
	color: dome-color(dome,primary);
}
.txt-bright{
	color: dome-color(dome,bright);
}
.txt-circle{
	display: inline-block;
	margin-left: 10px;
	padding: 0 14px 0 14px;
	line-height: 34px;
	font-style: normal;
	background-color: dome-color(background,light);
	border-radius: 22px;
	&.active{
		background-color: dome-color(background,primary);
	}
}
/* text style end*/

.font-size-16{
	font-size: 16px;
}
.font-size-18{
	font-size: 18px;
}
.tool-wrap-break{
	word-break:break-all;
}
.tool-inline-error{
	color: dome-color(dome,error);
	margin-left: 10px;
}
// no wrap (eg:there is text with class '.tool-nowrap'...)
.tool-nowrap{
	@extend %nowrap;
}
// text align input
.tool-align-input{
	padding-top: 6px;
}
.tool-enable-click:hover{
	cursor: pointer;
}
.full{
	width: 100%;
}
.popover.top{
	word-wrap:break-word;
}
// checkbox/radio's parent container
.com-check-con{
	margin-right: 40px;
}
// list like tabset
.com-tabset-scroll{
	position: relative;
	display: inline-block;
	margin-right: 10px;
	height: 42px;
	font-size: 14px;
	max-width: 0;
	overflow: hidden;
	.list-back{
		width: 10000px;
	}
}
ul.com-list-tab{ 
	display: inline-block;
	li{
		display: inline-block;
		padding-bottom: 20px;
		margin-right: 34px;
		border-bottom: 2px solid transparent;
		&:last-child{
			margin-right: 0;
		}
		&.active{
			color:dome-color(dome,primary);
			border-bottom: 2px solid dome-color(dome,primary);
		}
		&.txt-error{
			color:dome-color(dome,error);
		}
		&:hover{
			cursor: pointer;
			border-bottom: 2px solid dome-color(dome,primary);
		}
		&.nav-option{
			position: absolute;
			right: 0;
			top: 0;
			width: 48px;
			height: 42px;
			margin-right: 0;
			padding-top: 8px;
			background-color: #fff;
			.icon-next{
				margin-left: 8px;
			}
			&:hover{
				border-bottom: none;
			}
		}
	}
}
// bottom div include button
.com-bottom-option{
	padding-top: 50px;
	padding-bottom: 30px;
	text-align: center;
	// container of buttons with error info
	.com-bottom-option-con{
		position: relative;
		display: inline-block;
		.txt-error{
			position: absolute;
			left: 100%;
			top:8px;
			width: 230px;
			padding-left: 12px;
			text-align: left;
		}
	}
}
// chose registry 
.com-chose-repository{
	padding-top: 22px;
	.repository{
		display: inline-block;
		width: 160px;
		height: 60px;
		margin-right: 66px;
		line-height: 60px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		border-radius: $default-radius;
		border:2px solid transparent;
		background-color: dome-color(background,light);
		&:hover{
			cursor: pointer;
			border-color:dome-color(dome,primary);
		}
		i{
			margin-right: 6px;
		}
		.icon-gitlab{
			@include  get-sprite($lib-icons,gitlab,true);
		}
		.icon-github{
			@include  get-sprite($lib-icons,github,true);
		}
		&.active{
			border-color:dome-color(dome,primary);
			background-color: #fff;
		}
	}
}
// page no
.com-page-list{
	text-align: right;
	padding: 12px $page-padding 12px 0;
	.pageno{
		display: inline-block;
		margin-left: 6px;
		margin-right: 6px;
		&:hover{
			cursor: pointer;
		}
		&.on{
			font-weight: bold;
			color: dome-color(dome,primary);
		}
	}
	.page-info{
		margin-right: 10px;
	}
}
// style like label
.com-label-list{
	li{
		float: left;
		margin-right: 16px;
		margin-bottom: 18px;
		.label-item{
			display: inline-block;
			padding: 4px 8px 4px 8px;
			background-color: dome-color(background,light);
			border-radius: $default-radius;
			.icon-cancel{
				margin-right: 4px;
			}
		}
	}
}
.com-list-table{
	li.head{
		background-color: dome-color(background,light);
	}
	li{
		padding: 10px 12px 10px 15px;
		border-bottom: $light-border;
		&:last-child{
			border-bottom: none;
		}
		&:hover .ui-table-link{
			color: dome-color(dome,bright);
		}
	}
}
.nav-tabs{
	border-bottom: $light-border;
	padding-left: 16px;
	li{
		margin-bottom: 0;
		padding: 0 27px 0 27px;
		&>a{
			border:none;
			margin-right: 0px;
			text-align: center;
			border:none;
			border-radius: 0;
			padding: 22px 5px 20px 5px;
			&:hover,&:focus{
				background: none;
				color: dome-color(font,default);
			}
		}
		&.active>a,&.active>a:hover,&.active>a:focus{
			border:none;
			border-radius: 0;
		}
		&:not(.nav-option){
			&.active>a,&.active>a:hover,&.active>a:focus{
				border-bottom: 2px solid dome-color(dome,primary);
				color:dome-color(dome,primary);
			}
		}
	}
}

.tool-noinfo{
	padding: 30px 0;
}



/* dome custom input */
input.ui-radio,
input.ui-check{
	display:none; 
	cursor:pointer; 
	vertical-align: middle;
	&:focus,
	&:active{
		outline:none;  
	}
	& + label{
		cursor:pointer; 
		display:inline-block;
		vertical-align: middle;
		position: relative;
		padding-left:25px;
		font-weight: 400;
		margin-right:10px;
		&:before,
		&:after{
			content:" ";
			font-family: helvetica;
			display:inline-block;
			width:18px;
			height:18px;    
			left:0;
			bottom:1px;
			text-align:center;
			position: absolute;
		}
		&:before{
			border: 1px solid #babec8;
			background-color:#fff;
			@include box-shadow(inset 0 0 0 0px dome-color(dome,active));    
			@include transition(all .3s ease-in-out);
		}
		&:after{
			color:#fff;
		}
		&:empty{
			&:before,
			&:after{
				bottom:-10px;
			}
		}
	}
	&.size16+label{
		&:before,
		&:after{
			bottom: 3px;
		}
		&:empty{
			&:before,
			&:after{
				bottom:-7px;
			}
		}
	}
	&:checked + label{
		color: dome-color(dome,active);
	}
	&:checked + label:before{
		border: none;
		@include box-shadow(inset 0 0 0 10px dome-color(dome,active));    
	}
}

/*Radio Specific styles*/
input.ui-radio{
	& + label:before{
		@include border-radius(50%);
	}
	& + label:hover:after,
	&:checked + label:after{
		content:'\2022';
		position:absolute;
		top:2px;
		left: 0;
		font-size:18px;
		line-height:17px;
	}
	& + label:empty:hover:after,
	&:checked + label:empty:after{
		top:-10px;
		left: -0.5px;
	}
	& + label:hover:after{
		color:darken(#fff, 20%);  
	}
	&:checked + label:after,
	&:checked + label:hover:after{
		top: 2px;
		color:#fff;
	}
}


/*Checkbox Specific styles*/
input.ui-check{
	& + label:before{
		@include border-radius(3px); 
	}
	& + label:after{
		content:"\2713";
		color:#E5EDF5;
		line-height:18px;
		font-size:14px;
	}
	& + label:hover:after{
		color:#9BAFC9;  
		@include transition(.3s)
	}
	&:checked + label:after,
	&:checked + label:hover:after{
		color: #fff;
	}
}


.ui-toggle{
	display:inline-block;
	width:51px;
	height:24px;
	margin-top: 3px;
	margin-right: 8px;
	border:none;
	box-shadow: none;
    // background-color:dome-color(background,deep);
    background-color:#ccc;
    position: relative;
    @include border-radius(30px);
    @inlcude box-shadow(none);
    @include transition(all .2s ease-in-out);
    vertical-align: bottom;
    &:after{      
    	content:'';
    	display:inline-block;
    	position:absolute;
    	width:20px;
    	height:20px;
    	background-color:#fff;
    	top:2px;
    	left:2px;
    	@include border-radius(50%);
    	@include transition(all .2s ease-in-out);
    }
    &.on{
    	@include box-shadow(inset 0 0 0 12px dome-color(dome,active));
    	&:after{
    		left:29px;
    		background-color:#fff;
    	}
    }
}
